<template>
  <div class="app-container" style="padding: 0px;position:relative;">
    <div style="color: #72A4FF;font-size: 20px;font-weight: bold;">项目统计</div>
    <el-row>
      <el-col :span="24">
        <el-row>
          <el-col :span="9">
            <el-card class="box-card" style="height:150px;background: #CCCC66;border-radius:10px;margin-top: 30px;color: #FFFFFF;">
              <div style="font-size: 25px;text-align: center;margin-top: 8px;">项目总数：{{proTypeOptions.length}}</div>
              <div style="height:80px;" class="myScrollbar">
                <el-scrollbar style="height:100%;">
                  <div v-for="proType in proTypeOptions" style="clear: both;margin-left: 20px;padding: 10px;">
                    <div style="width: 10px;height: 10px;background: #000000;float: left;margin-top: 5px;"></div>
                    <div style="font-size: 15px;color: #000000;float: left;line-height: 20px;margin-left: 10px;">{{proType.dictLabel}}</div>
                  </div>
<!--                  <div style="clear: both;margin-left: 20px;padding: 10px;">-->
<!--                    <div style="width: 10px;height: 10px;background: #000000;float: left;margin-top: 5px;"></div>-->
<!--                    <div style="font-size: 15px;color: #000000;float: left;line-height: 20px;margin-left: 10px;">排水项目</div>-->
<!--                  </div>-->

                </el-scrollbar>
              </div>
            </el-card>
          </el-col>
          <el-col :span="15">
            <count-point :chart-data="countPointObj" :height="'170px'"/>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="24">
        <el-row>
          <el-col :span="9">
            <el-card class="box-card" style="height:150px;background: #CCCC66;border-radius:10px;margin-top: 20px;color: #FFFFFF;">
              <div style="font-size: 25px;text-align: center;margin-top: 40px;">站点总数：{{pointAllCount}}</div>
            </el-card>
          </el-col>
          <el-col :span="15">
            <count-point-online :chart-data="countPointOnlineObj" :height="'170px'"/>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { queryCount,downRestoreDev } from "@/api/basic/collectPoint";
  import countPoint from './countPoint';
  import countPointOnline from './countPointOnline';

  const countPointObj = {
    legendData: [],//['ee', 'ff'],
    seriesData:[],//[{ value: 5, name: 'ee' },{ value: 6, name: 'ff' }],
  }
  const countPointOnlineObj = {
    legendData: [],//['ee', 'ff'],
    seriesData:[],//[{ value: 5, name: 'ee' },{ value: 6, name: 'ff' }],
  }

  export default {
    components: {countPoint,countPointOnline},
    data() {
      return {
        countPointObj:countPointObj,
        countPointOnlineObj:countPointOnlineObj,
        proTypeOptions:[],
        pointAllCount:0,
      };
    },
    mounted() {

    },
    created() {
      this.getDicts("basic_pro_type").then(response => {
        this.proTypeOptions = response.data;
        this.handleCountPoint();
      });
    },
    methods: {
      proTypeFormat(obj) {
        return this.selectDictLabel(this.proTypeOptions, obj);
      },
      handleCountPoint(){
        let _this=this;
        _this.countPointObj.legendData = [];
        _this.countPointObj.seriesData = [];
        _this.countPointOnlineObj.legendData = [];
        _this.countPointOnlineObj.seriesData = [];
        queryCount().then(response => {
          this.pointAllCount = response.countAll.countNum;
          _this.countPointOnlineObj.legendData.push('在线 '+response.onLineNum);
          _this.countPointOnlineObj.legendData.push('离线 '+(this.pointAllCount-response.onLineNum));
          _this.countPointOnlineObj.seriesData.push({ value: response.onLineNum, name: '在线 '+response.onLineNum });
          _this.countPointOnlineObj.seriesData.push({ value: (this.pointAllCount-response.onLineNum), name: '离线 '+(this.pointAllCount-response.onLineNum) });
          response.countAllByPro.forEach(function (item) {
            _this.countPointObj.legendData.push(_this.proTypeFormat(item.proType)+' '+item.countNum);
            _this.countPointObj.seriesData.push({ value: item.countNum, name: _this.proTypeFormat(item.proType)+' '+item.countNum });
          })
        });
      },
    },
  };
</script>
<style scoped lang="scss">
  .myScrollbar ::v-deep .el-scrollbar__wrap {
    overflow-x: hidden;
  }
</style>
